<template>
  <div class="ano-panel ano-art-panel" v-if="!childComName">
    <template v-if="!imageInfo.txt">
      <AnoArts :imageInfo="imageInfo" @designAdd="onDesignAdd" @designChange="onDesignChange"/>
    </template>

    <template v-else>
      <AnoPanelHd title="编辑艺术图" />
      <div class="panel-bd panel-bd-edit">
        <!-- <div class="section-row section-font">
          <div class="label">字体</div>
          <div class="cnt">
            <div class="result" @click="handleSelectFont">
              <img class="res-img" src="../../../assets/imgs/custom_item_1.png" alt="">
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div> -->
        <div class="section-row section-fontColor">
          <div class="label">纯色</div>
          <div class="cnt">
            <div class="result result-color" @click="handleSelectColor('artColor')">
              <span class="res-colorName">White</span>
              <span class="res-color" :style="{backgroundColor: formData.artColor || '#fffff'}"></span>
            </div>
            <i class="el-icon-arrow-right"></i>
          </div>
        </div>
        <div class="section-row section-rotate">
          <div class="label">旋转</div>
          <div class="cnt">
            <div class="slider">
              <el-slider 
                :value="+formData.angle + 0" 
                :min="-180" 
                :max="180" 
                @input="(e) => formData.angle = e"
                @change="onAngleChange"></el-slider>
            </div>
            <div class="result">
              <el-input class="panel-input-sort" 
                v-model.number.trim="formData.angle"
                @change="onAngleChange"></el-input>
            </div>
          </div>
        </div>
        <div class="section-row section-size">
          <div class="label">图片尺寸</div>
          <div class="cnt">
            <div class="result-size">
              <span class="icon icon-lock" 
                :class="{'icon-lock2': !formData.isLock}"
                @click="onLockChange"></span>
              <el-input class="panel-input-sort"
                v-model.number.trim="formData.width"
                @change="onWidthChange"></el-input>
              <span class="units">in</span>
              <span class="symbol">×</span>
              <el-input class="panel-input-sort"
                v-model.number.trim="formData.height"
                @change="onHeightChange"></el-input>
              <span class="units">in</span>
            </div>
          </div>
        </div>
        <div class="section-row section-tools">
          <AnoTools />
        </div>
      </div>
    </template>
  </div>
  <component 
    v-else 
    :is="childComName"
    :text="formData.text"
    @colorChange="onColorChange"
    @fontChange="onFontChange"
    @confirm="onSelectionConfirm"
  ></component>
</template>

<script>
import AnoPanelHd from './anoPanelHd'
import AnoArts from './anoArts'
import AnoColors from './anoColors'
import AnoTools from './anoTools'

import { mapGetters, mapMutations } from 'vuex'
import Qs from 'qs'
import { hexToRgb, rgbTohex } from '@/lib/utils'

import { getImageByWord } from '@/api/design'

export default {
  name: 'anoArtPanel',
  components: {
    AnoPanelHd,
    AnoArts,
    AnoColors,
    AnoTools
  },
  props: {
    imageInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        text: '',
        fontFamily: '',
        width: 200,
        height: 240,
        artColor: '',
        colorR: '100',
        colorG: '100',
        colorB: '100',
        outLine: false,
        outlineColor: '',
        outLineR: '100',
        outLineG: '100',
        outLineB: '100',
        outLineSize: 8,
        hide: false,
        angle: 0,
        isLock: true,
        ratio: 1.2
      },


      activeColorAttr: 'fontColor',

      childComName: '',
    }
  },
  computed: {
    ...mapGetters({
      activeImageIndex: 'getActiveImageIndex',
      activeMenuIndex: 'getActiveDesignMenuIndex'
    }),
  },
  created() {
    this.formData = Object.assign({}, this.formData, {
      ...this.imageInfo,
      fontColor: rgbTohex(this.imageInfo.colorR, this.imageInfo.colorG, this.imageInfo.colorB),
      outlineColor: rgbTohex(this.imageInfo.outLineR, this.imageInfo.outLineG, this.imageInfo.outLineB),
    })
  },
  methods: {
    ...mapMutations([
      'setActiveDesignComponent',
    ]),
    getImageObj(params) {
      let fontColorRgb = hexToRgb(params.fontColor)
      let outlineColor = hexToRgb(params.fontColor)
      return {
        ...params,
        colorR: fontColorRgb.r,
        colorG: fontColorRgb.g,
        colorB: fontColorRgb.b,
        outLineR: outlineColor.r,
        outLineG: outlineColor.g,
        outLineB: outlineColor.b,
        outLine: params.outLineSize >= 0 ? true : false
      }
    },
    onAngleChange(e) {
      if (!e && e !== 0) {
        this.formData.angle = this.imageInfo.angle;
        return;
      }
      if (typeof +e !== 'number' || isNaN(e)) {
        this.formData.angle = this.imageInfo.angle;
        return;
      }
      this.formData.angle = e <= -180 ? -180 : e;
      this.formData.angle = e >= 180 ? 180 : e;
      this.onDesignChange()
    },
    onDesignAdd(res) {
      this.$emit('designAdd', this.getImageObj(this.formData))
    },
    onDesignChange(res) {
      this.$emit('designChange', this.getImageObj(this.formData))
    },
    handleSelectFont() {
      this.childComName = 'AnoFonts'
    },
    handleSelectColor(attr) {
      this.activeColorAttr = attr;
      this.childComName = 'AnoColors'
    },
    onColorChange(e) {
      this.formData[this.activeColorAttr] = e;
    },
    onLockChange() {
      this.formData.isLock = !this.formData.isLock;
    },
    onWidthChange(e) {
      if (this.formData.isLock) {
        this.formData.height = this.formData.width * this.formData.ratio;
      }
      console.log(e, '--onWidthChange-')
    },
    onHeightChange(e) {
      if (this.formData.isLock) {
        this.formData.width = this.formData.height / this.formData.ratio;
      }
      console.log(e, '--onHeightChange-')
    },
    onSelectionConfirm() {
      this.childComName = ''
    }
  }
}
</script>


<style lang="less" scoped>
.ano-art-panel {
  .panel-bd-edit {
    .section-row {
      border-top: 1px solid #ddd;
      padding: 5px 5px 5px 10px;
    }
  }
}
.section-rotate {
  .slider {
    flex: 1;
    margin-left: 30px;
    margin-right: 30px;
  }
}
.section-size {
  .result-size {
    display: flex;
    align-items: center;
    .icon-lock {
      width: 24px;
      height: 24px;
      margin-right: 5px;
      background: url(../../../assets/imgs/icon-lock1.png) no-repeat center;
      background-size: 22px auto;
      cursor: pointer;
    }
    .icon-lock2 {
      background: url(../../../assets/imgs/icon-lock2.png) no-repeat center;
      background-size: 22px auto;
    }
    .units {
      margin-left: 5px;
    }
    .symbol {
      position: relative;
      top: 2px;
      font-weight: 700;
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}
</style>
